<template>
	<div style='height:100%;' ref='containerRef'>
		<v-chart v-if='value' autoresize :option='options'></v-chart>
		<XLoading v-else></XLoading>
	</div>
</template>

<script lang='ts'>
	import { use } from "echarts/core";
	import {
		PieChart
	} from 'echarts/charts'
import { defineComponent, ref, toRef, computed } from "vue";
	use([
		PieChart
	])
	interface Props {
		modelValue : any[] | null;
	}
	export default defineComponent({
		props : {
			modelValue : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},


		setup(props:Props) {
			let containerRef = ref<{[key:string]:any}>({})
			const value = toRef(props, 'modelValue')
			var colorList = [
                    ['#1b8fff', '#1dc7ff'],
                    ['#7233ff', '#554aff'],
                    ['#53cb1a', '#98d10f'],
                    ['#ef485f', '#f5674c'],
                    
                ]

			let options = computed(() => {
				var W = containerRef.value.clientHeight * 0.5 / 2
				var radius = W * 1
				var minAngle = 60
				var minRate = minAngle / 360
				var data = JSON.parse(JSON.stringify(props.modelValue))
                data.sort(function(a, b) {
                    return b.value - a.value
                })

				var total = 0
				var sum = 0
				data.forEach((v, i) => {
					total += v.value
                    sum += v.value
                    
                    if(i == 0) {
                        v.radius = radius
                    }else {
                        if(v.value < data[i - 1].value) {
                            radius -= 5
                        }

                        v.radius = radius
                    }
				})

				var incrValue = 0
				var minValue = sum * minRate
				
				data.forEach(v => {
					v.v = v.value
					if(v.value < minValue) {
						incrValue += (minValue - v.value)
						v.value = minValue
					}
				})

				if(incrValue >= 1) {
					while(true) {
						for(let i = 0; i < data.length; i ++) {
							var item = data[i]
							if(item.value >= (minValue + 1)) {
								item.value --
								incrValue --
							}
						}
						if(incrValue < 1) {
							break
						}
					}
                }
                
                
                
				sum = 0
				data.forEach(v => {
                    sum += v.value
                })
                

				var startAngle = 360
				var series = []

				var offset = 0 / 360 * sum
				
				
				data.forEach((item, index) => {
                    var color = {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: colorList[index][0] // 0% 处的颜色
                            }, {
                                offset: 1, color: colorList[index][1] // 100% 处的颜色
                            }]
                        }
					var v = item.value
					var serie = {
						type : 'pie',
						startAngle : startAngle,
						silent : true,
						center : ['50%', '50%'],
						radius : ['30%', item.radius],
						labelLine: {
							show: true,
                            length: 20,
                            length2: 30,
                            lineStyle : {
                                color : '#a9abaf'
                            }
						},
						label : {
							show : true,
							align : 'center',
							formatter (params) {
								var v = params.data
								var rate = v.percent//(v.v / total * 100).toFixed(2)
								return `${rate}%`
							}
						},
						data   : [
							{name : item.name, value : v - offset, v : item.v, percent : item.percent, label : {color : '#a9abaf', align : 'center', rich : {name : {color : '#a9abaf'}, margin : {height : 4, width : '100%'},hr : {height : 1, width : '100%', backgroundColor : '#5c6270'}}}, itemStyle : {color : color}},
							{name : item.name, value : sum - v, v : v, percent : item.percent, itemStyle : {color : 'transparent'}, label : {show : false}, labelLine : {show : false}}
						]
					}
					series.push(serie)
					if(sum == 0) {
						startAngle -= (360/data.length)
					}else {
						startAngle -= (v / sum * 360)
					}
					
					//startAngle -= (item.percent * 360)
				})
				
				var options =  {
					grid : {
						top : '0px',
						right : '0px',
						bottom : '0px',
						left : '0px'
					},

					series: series
				}

				return options
			})



			return {
				containerRef,
				options,
				value
			}
		}
	})
</script>